<template>
	<view>
		<view class="time">
			<text>剩余00小时29分自动取消</text>
		</view>
		
		<view class="address">
			<image src="../../../static/地址管理@2x.png" mode="" class="icon"></image>
			<view class="detail">
				<view class="message">
					<text class="name">金铲铲</text>
					<text class="phone">13656886523</text>
				</view>
				<view class="location">
					<text>广东省深圳市宝安区某某街道某某小区1栋801</text>
				</view>
				<u-icon name="arrow-right" class="more"></u-icon>
			</view>
			<image src="../../../static/bottom-border.png" mode="" class="bottom"></image>
		</view>
		
		<view class="shop-message">
			<view class="shop-detail">
				<view class="introduce">
					<view class="picture">
						<image src="../../../static/person.png" mode=""></image>
					</view>
					<view class="author">
						<view class="name">
							<text>白启哲《春风细雨沐青峰》</text>
						</view>
						<view class="size">
							<text>140*140</text>
						</view>
						<view class="amount">
							<text>×1</text>
						</view>
					</view>
					<view class="price">
						<text>¥20000</text>
					</view>
				</view>
			</view>
			
			<view class="expressage">
				<view>
					<text>配送费用</text>
				</view>
				<view>
					<text>¥12</text>
				</view>
			</view>
			
			<view class="computed">
				<text>共1件商品，合计：</text>
				<text class="money">¥20000</text>
			</view>
			
			<view class="order-detail">
				<view class="list">
					<text>订单编号</text>
					<text>1863284856838728</text>
					<text class="copy">复制</text>
				</view>
				<view class="list">
					<text>创建时间</text>
					<text>2021-09-08 18:00:00</text>
					<text class="copy" style="visibility: hidden;">复制</text>
				</view>
				<view class="list">
					<text>备注</text>
					<text>请尽快发货谢谢！</text>
					<text class="copy" style="visibility: hidden;">复制</text>
				</view>
			</view>
			
			<view class="btn-bar">
				<view class="btn">
					<view class="cancel" @click="model = true">取消订单</view>
					<view type="error" class="confirm" :loading= "loading" @click="confirmPay">确认支付</view>
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="popup">
				<u-popup v-model="model" mode="center" border-radius="28" width="380px" height="200px">
					<view style="height: 130px;text-align: center;line-height: 130px;font-size: 18px;">
						<text>订单还未付款，确定要取消吗?</text>
					</view>
					<view style="height: 70px;display: flex;">
						<view class="cancel" @click="goToGoodsDetail">
							<text>取消订单</text>
						</view>
						<view class="thinkAbout" @click="model=false">
							<text>再考虑下</text>
						</view>
					</view>
				</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
			model:false,
			}
		},
		methods:{
			goToGoodsDetail(){
				uni.navigateTo({
					url:'../goodsDetail/goodsDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time {
		width: 100%;
		height: 80rpx;
		background-color: #c6100e;
		line-height: 80rpx;
		color: #ffffff;
		text-align: center;
	}
	
	.address {
		height: 160rpx;
		width: 100%;
		position: relative;
	}
	
	.address .icon {
		width: 60rpx;
		height: 60rpx;
		margin-top: 50rpx;
		margin-left: 10rpx;
	}
	
	.address .message {
		position: absolute;
		top: 32rpx;
		left: 100rpx;
	}
	
	.phone {
		margin-left: 20rpx;
	}
	
	.address .location {
		position: absolute;
		top: 100rpx;
		left: 100rpx;
		color: #939393;
		font-size: 28rpx;
	}
	
	.address .more {
		position: absolute;
		top: 60rpx;
		right: 40rpx;
	}
	
	.address .bottom {
		width: 100%;
		height: 10rpx;
		margin-top: 80rpx;
	}
	
	
	.shop-message {
		background-color: #fefffe;
	}
	
	.shop-detail {
		// margin-top: 120px;
		// background-color: #4CD964;
		width: 90%;
		height: 220rpx;
	}
	
	.introduce {
		display: flex;
		position: relative;
		margin-top: 80rpx;
		margin-left: 30rpx;
	}
	
	.picture {
		width: 200rpx;
		height: 200rpx;
		margin-top: 30rpx;
	}
	
	.picture image {
		width: 200rpx;
		height: 200rpx;
	}
	
	.author {
		margin-top: 50rpx;
		margin-left: 20rpx;
	}
	
	.author .size {
		color: #939393;
		font-size: 28rpx;
	}
	
	.author .amount {
		color: #939393;
		font-size: 28rpx;
	}
	
	.price {
		color: #939393;
		font-size: 28rpx;
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
	}
	
	.expressage {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 5%;
		height: 100rpx;
		border-bottom: 2rpx solid #F3F3F3;
		border-top: 2rpx solid #F3F3F3;
	}
	
	.expressage text {
		line-height: 100rpx;
	}
	
	.computed {
		width: 90%;
		margin: 5%;
		height: 60rpx;
		display: flex;
		justify-content: flex-end;
		line-height: 40rpx;
	}
	
	.computed .money {
		color: #c6100e;
		font-weight: 700;
	}
	
	.order-detail {
		width: 90%;
		margin: 5%;
		background-color: #fefffe;
	}
	
	.list {
		display: flex;
		justify-content: space-between;
	}
	
	.list .copy {
		color: #c6100e;
	}
	
	.btn-bar {
		background-color: #fefffe;
		height: 200rpx;
		margin-top: 260rpx;
	}
	
	.btn {
		display: flex;
		justify-content: flex-end;
	}
	
	.btn .cancel {
		height: 80rpx;
		width: 300rpx;
		border: 2rpx solid #939393;
		color: #939393;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
	}
	
	.btn .confirm {
		height: 80rpx;
		background-color: #c6100e;
		width: 300rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #ffffff;
	}
	
	.popup .cancel {
		width: 380rpx;
		background-color: #e9e9e9;
		text-align: center;
		line-height: 140rpx;
		color: #7b7b7b;
		font-size: 36rpx;
		font-weight: 700;
	}
	
	.popup .thinkAbout {
		width: 380rpx;
		background-color: #c6100e;
		text-align: center;
		line-height: 140rpx;
		color: #ffffff;
		font-size: 36rpx;
		font-weight: 700;
	}
</style>
